<template>
  <div style="width: 100%">
    <!-- 注意绑定值是 modelValue 而不是 value  并且input事件传入的参数是值本身 -->
    <el-input style="width: 100%" :modelValue="val" @input="handleInput" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  name: 'Input',
  props: {
    modelValue: String,
  },
  emits: ['update:modelValue'],
  // eslint-disable-next-line
  setup(props, { attrs, slots, emit, expose }) {
    // %%%  特别注意当点击重置之后  本组件的prop不能实时响应  但watch能监听到变化了
    const val = ref(props.modelValue);
    watch(
      () => props.modelValue,
      (newVal) => {
        // console.log('input', newVal, val.value);
        val.value = newVal;
      },
    );
    const handleInput = (value: any) => {
      // console.log('input...', event);
      val.value = value;
      emit('update:modelValue', value);
    };
    return {
      val,
      handleInput,
    };
  },
});
</script>

<style scoped></style>
